<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'Bar',
  props: {
    value: {},
    name: null,
    show: null,
    color: '',
    text: ''
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    let data = this.value.date
    // console.log(this.value)
    const option = {
      title: {
        text: this.text,
        x: 'center'
      },
      color: [this.color],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.value.date,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: { formatter: '{value} %' }
        }
      ],
      legend: {
        orient: 'vertical',
        top: '8%',
        right: '0%',
        data: this.value.date,
        textStyle: {
          // fontSize: difSize_title,
          color: '#000'
        }
      },
      series: [
        {
          type: 'bar',
          barWidth: '30%',
          name: this.name,
          stack: '总量',
          data: this.value.count
        }
      ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
